<template>
  <div class="body">
    <div class="top">
      <span>积分管理</span>
      <el-button type="primary" @click="update">更新</el-button>
    </div>
    <div class="main">
      <div class="box">
        <div class="title">
          <div class="item" v-for="(item,i) in title" :key="i" :class="now==i?'active':''" @click="Switch(i)">
            {{ item }}
          </div>
        </div>
        <div class="card">
          <div v-if="0==now">
            <chart :grade="title[0]"></chart>
          </div>
          <div v-if="now==1">
            <chart :grade="title[1]"></chart>
          </div>
          <div v-if="2==now">
            <chart :grade="title[2]"></chart>
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
            :data="pages[0]"
            :default-sort="{ prop: 'createdat', order: 'descending' }"
            style="width: 100%"
        >
          <el-table-column prop="code" label="code"  width="180"/>
          <el-table-column prop="status" label="status" width="90"/>
          <el-table-column prop="qq" label="account" />
           <el-table-column prop="grade" label="grade"  width="90"  />
             <el-table-column prop="createdat" sortable label="createTime" />
             <el-table-column prop="updatedat" label="updateTime" />
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"/>
      </div>
    </div>
    <div class="btm">
      <el-button type="primary" @click="excel">点我下载</el-button>

    </div>
  </div>
</template>

<script setup>
import * as XLSX from "xlsx";
import {inject, ref, reactive, onMounted} from "vue";
import chart from "../components/pie"
import letter from '../utils/genarateLetter'
import copy from "@/utils/copy";

const pages = reactive([
  [{}]
])
const axios = inject("$axios")
const now = ref(0)
const Switch = (i) => {
  now.value = i
}
const total = ref(0)
const title = reactive([
  "黄金",
  "白银",
  "青铜"
])
const codes = reactive([[]])
onMounted(()=>{
  axios.get("code/page?p=1&s=10").then(res=>{

     res.data?.data?.data.forEach(i=>{
       if(i.qq==null)i.qq ="无"
       if(i.status==0)i.status ="未使用"
        if(i.status==1)i.status ="已使用"
        if(i.updatedat==null)i.updatedat ="无"
       i.createdat= i.createdat.slice(0, i.createdat.indexOf('.'))

     })
     pages[0] = res.data?.data?.data
    total.value = res.data?.data?.p*10
  }).catch(er=>{

  })
})
const handleCurrentChange = val => {
  axios.get("/code/page?p=" + val + "&s=10").then(res => {
   res.data?.data?.data.forEach(i=>{
       if(i.qq==null)i.qq ="无"
       if(i.status==0)i.status ="未使用"
        if(i.status==1)i.status ="已使用"
        if(i.updatedat==null)i.updatedat ="无"
       i.createdat= i.createdat.slice(0, i.createdat.indexOf('.'))

     })
     pages[0] = res.data?.data?.data
  }).catch(err => {

  })
}
const excel = () => {
  axios.get("code/list").then(res => {
    const workbook = XLSX.utils.book_new();
// 创建一个新的工作表
    const worksheet = XLSX.utils.json_to_sheet(res.data.data);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet, "code");
// 导出工作簿，并命名导出文件名为Presidents.xlsx
    var currentTime = new Date();
    XLSX.writeFile(workbook, currentTime+".xlsx");
  }).catch(err => {
  })
}

const update = () => {
  var res = confirm("确认更新？确保已经下载好了上次的数据")
  if (res) {
    codes[0].length = 0
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 500; j++) {
        var tem = {
          code: "",
          grade: ""
        }
        tem.code = generate()

        tem.grade = title[i]
        codes[0].push(tem)
      }

    }
    axios.post("code", codes[0]).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

}
const number = () => {
  var tem = Math.random() * 10000
  if (tem > 1000) {
  } else {
    tem = tem + 1000
  }
  return Math.floor(tem)
}
const generate = () => {
  var str = number() + "" + number() + letter() + number()
  var id = Math.floor(Math.random() * 12)
  return str.replace(str.slice(id, id + 4), letter())

}

</script>

<style scoped lang="less">
.body {
  padding-bottom: 40px;
  background-color: rgba(214, 226, 251, .9);
}

.top {
  margin: 20px auto;
  background-color: rgba(255, 255, 255, .9);
  width: 250px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  text-align: start;
  text-indent: 2em;
  box-shadow: 1px 1px 10px #bacfe7;

  span {
    margin: auto 20px;
  }
}

.main {
  width: 98%;
  max-width: 1300px;
  margin: 10px auto;
  display: flex;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 7px aliceblue;
  display: flex;
  justify-content: flex-start;

  .table {
    margin: 10px;
    flex: 1;

  }


}

.box {
  margin: 10px auto;
  magin-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 400px;
  height: 500px;

  .title {
    padding: 10px;
    display: flex;
    flex-direction: row;

    .item {
      color: #909399;
      margin: 10px;
    }

    .active {
      color: deepskyblue;
      border-bottom: 2px solid deepskyblue;
    }
  }

  .card {
    padding: 10px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    height: 330px;


    .code {
      margin: 10px;
    }
  }

  .btm {
    margin-left: 15px;
  }
}
</style>